import { trigger, state, style, transition, animate, keyframes } from "@angular/animations";

export const flyIn = trigger("flyIn", [
  state("in", style({ transform: "translateX(0)" })),
  transition("void => *", [
    animate(300, keyframes([
      style({ opacity: 0, transform: "translateX(-100%)", offset: 0 }),
      style({ opacity: 1, transform: "translateX(25px)", offset: 0.3 }),
      style({ opacity: 1, transform: "translateX(0)", offset: 1.0 })
    ]))
  ]),
  transition("* => void", [
    animate(300, keyframes([
      style({ opacity: 1, transform: "translateX(0)", offset: 0 }),
      style({ opacity: 1, transform: "translateX(-25px)", offset: 0.7 }),
      style({ opacity: 0, transform: "translateX(100%)", offset: 1.0 })
    ]))
  ])
]);
